<template>
	<div class="logo-list" :style="{width,backgroundColor}">
		<div :style="{
			width: boxSize,
			paddingBottom: boxSize,
			borderRadius,
			marginRight: marginStyle(index)
		}" v-for="item,index in list" :key="index" class="logo-list-box">
			<image :style="{borderRadius}" class="logo-img" :src="item" mode="aspectFill"></image>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			//列数
			column: {
				type: Number,
				default: 4
			},
			//整个组件的宽度
			width: {
				type: String,
				default: '95%'
			},
			//logo盒子的圆角，默认2.13vw
			borderRadius: {
				type: String,
				default: '2.13vw'
			},
			//图片路径的数组
			list: {
				type: Array,
				default: [1,2,3,4,5,6,7,8]
			},
			backgroundColor: {
				type: String,
				default: '#FFF'
			}
		},
		data() {
			return {

			}
		},
		methods: {

		},
		computed: {
			//判断每个logo盒子是不是每一行的最后一个
			marginStyle(){
				return (index) => {
					if((index + 1) % this.column == 0) return '0';
					else return '1.33vw';
				}
			},
			//计算返回每个logo的宽高
			boxSize(){
				return `calc((100% - ${(this.column - 1) * 1.33}vw) / ${this.column})`;
			}
		}
	}
</script>

<style lang="scss">
	.logo-list{
		.logo-list-box {
			background-color: #F8F8F8;
			border-radius: 2.13vw;
			margin-bottom: 1.33vw;
			display: inline-block;
			vertical-align: middle;
			position: relative;
			.logo-img{
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 2.13vw;
			}
		}
	}
</style>
